<template>
  <div class="forgot-page">
    <div class="forgot-container">
      <h2>忘记密码</h2>
      <form @submit.prevent="handleReset" class="forgot-form">
        <div class="form-group">
          <input
            v-model="form.email"
            type="email"
            placeholder="请输入注册邮箱"
            required
          >
        </div>
        <button type="submit" class="reset-btn" :disabled="loading">
          {{ loading ? '发送中...' : '发送重置邮件' }}
        </button>
      </form>
      
      <div class="forgot-links">
        <router-link to="/login">返回登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const loading = ref(false)

const form = reactive({
  email: ''
})

const handleReset = async () => {
  loading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    alert('重置邮件已发送，请查收您的邮箱')
  } catch (error) {
    alert('发送失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.forgot-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

.forgot-container {
  width: 100%;
  max-width: 400px;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.forgot-container h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.reset-btn {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.reset-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.forgot-links {
  text-align: center;
  margin-top: 1rem;
}

.forgot-links a {
  color: #007bff;
  text-decoration: none;
}
</style>